<!--
 * @Author: 一品网络技术有限公司
 * @Date: 2022-07-01 08:36:59
 * @LastEditTime: 2024-03-28 15:46:35
 * @FilePath: \client\src\pages\order\edit.vue
 * @Description:
 * 联系QQ:58055648
 * Copyright (c) 2022 by 东海县一品网络技术有限公司, All Rights Reserved.
-->

<template>
	<yplayout v-if="isLoad">
		<template #header="props">
			<div class="flex items-center">
				<i
					class="ri-2x text-gray-500 ml-2"
					:class="props.meta.icon || 'ri-information-line'"
				></i>
				<div class="text-xl px-2" v-html="props.meta.title"></div>
			</div>
		</template>
		<template #list>
			<div class="flex pl-5 text-sm text-slate-500">
				<div
					:class="[
						'mx-3',
						'pb-1',
						'border-blue-600',
						'cursor-pointer',
						{ 'text-blue-600 border-b': currentTab === index },
					]"
					v-for="(item, index) in tabsData"
					:key="index"
					@click="currentTab = index"
				>
					{{ item }}
				</div>
			</div>
			<div class="text-sm text-gray-800">
				<div class="bg-white select-none p-2 space-y-3">
					<template v-if="currentTab === 0">
						<div class="flex items-center">
							<div class="w-24 text-right pr-5">所属企业</div>
							<div class="flex-1">
								<companyInput
									v-model="formData.company_id"
									v-model:companyName="formData.orderCompany.name"
								/>
							</div>
						</div>
						<div class="flex items-center">
							<div class="w-24 text-right pr-5">金额</div>
							<div class="flex-1">
								<ypinput
									v-model="formData.money"
									type="number"
									placeholder="请输入金额"
								></ypinput>
							</div>
						</div>
						<div class="flex items-center">
							<div class="w-24 text-right pr-5">备注</div>
							<div class="flex-1">
								<ypinput
									v-model="formData.intro"
									placeholder="请输入备注"
								></ypinput>
							</div>
						</div>
					</template>
					<template v-else-if="currentTab === 1">
						<div class="flex items-center">
							<div class="w-24 text-right pr-5">企业名称</div>
							<div class="flex-1">
								<ypinput
									v-model="formData.company.name"
									placeholder="请输入企业名称"
								></ypinput>
							</div>
						</div>
						<div class="flex items-center">
							<div class="w-24 text-right pr-5">联系人</div>
							<div class="flex-1">
								<ypinput
									v-model="formData.company.contact"
									placeholder="请输入联系人"
								></ypinput>
							</div>
						</div>
						<div class="flex items-center">
							<div class="w-24 text-right pr-5">营业执照</div>
							<div class="flex-1">
								<ypthumb v-model="formData.company.thumb"></ypthumb>
							</div>
						</div>
						<div class="flex items-center">
							<div class="w-24 text-right pr-5">联系电话</div>
							<div class="flex-1">
								<ypinput
									v-model="formData.company.phone"
									type="tel"
									placeholder="请输入联系电话"
								></ypinput>
							</div>
						</div>
						<div class="flex items-center">
							<div class="w-24 text-right pr-5">备注</div>
							<div class="flex-1">
								<ypinput
									v-model="formData.company.intro"
									placeholder="请输入备注"
								></ypinput>
							</div>
						</div>
						<div class="flex items-center">
							<div class="w-24 text-right pr-5">截止日期</div>
							<div>
								<ypdatepicker v-model="formData.company.endtime"></ypdatepicker>
							</div>
						</div>
						<div class="flex items-center">
							<div class="w-24 text-right pr-5">法人</div>
							<div class="flex-1">
								<ypinput
									v-model="formData.company.legal"
									placeholder="请输入法人"
								></ypinput>
							</div>
						</div>
						<div class="flex items-center">
							<div class="w-24 text-right pr-5">公司地址</div>
							<div class="flex flex-1 space-x-1">
								<ypmselect pid="168" v-model="formData.company.area"></ypmselect>
								<ypinput
									v-model="formData.company.address"
									placeholder="请输入公司详细地址"
								></ypinput>
							</div>
						</div>
						<div class="flex items-center">
							<div class="w-24 text-right pr-5">店铺总数</div>
							<div class="flex-1">
								<ypinput
									v-model="formData.company.totalstores"
									type="number"
									placeholder="请输入店铺总数"
								></ypinput>
							</div>
						</div>
					</template>
				</div>
				<div class="flex justify-center py-3 space-x-2">
					<button class="btn btn-hong" type="button" @click="update">
						<i class="ri-save-line ri-lg pr-1"></i>
						保存
					</button>
					<button class="btn" type="button" @click="router.push('list')">
						<i class="ri-arrow-go-back-line ri-lg pr-1"></i>
						返回
					</button>
				</div>
			</div>
		</template>
	</yplayout>
</template>
<script setup>
	import { useRoute, useRouter } from 'vue-router'
	import { getData, postData, alter } from '@/common/base'
	import { ref, reactive, onMounted } from 'vue'
	import companyInput from './components/companyInput.vue'
	const route = useRoute()
	const router = useRouter()
	const isLoad = ref(false)
	const currentTab = ref(0)
	const tabsData = ['基本信息', '企业信息']
	const companyData = reactive([])
	const id = route.query
	const formData = reactive({
		id: '',
		company_id: '',
		money: '',
		intro: '',
		company: {},
		orderCompany: {},
	})
	const update = async () => {
		const resp = await postData('order/update', formData)
		if (resp.code) {
			alter({ type: 'alter-success', text: resp.msg })
			router.push('list')
		}
	}

	const read = async () => {
		const resp = await getData('order/read', id)
		if (resp.code == 1) {
			const orderData = resp.data;
			Object.keys(formData).map((k) => {
				if (orderData[k]) formData[k] = orderData[k]
			})
			isLoad.value = true
		}
	}

	const getDataList = async () => {
		const res = await getData('company/index')
		const { data } = res.data
		data.map((item) => {
			companyData.push(item)
		})
	}

	onMounted(() => {
		getDataList()
		if (id) {
			read()
		}
	})
</script>
